import type {IColumnsOption} from 'vc';
import {
  INDEX,
} from '@/utils/tableColumn';
import {toF9, toProjectDetail} from '@/utils';


export function useTable() {
  const columns = ref<IColumnsOption[]>([
    {...INDEX},
    {
      field: 'projectName',
      title: '项目名称',
      width: 350,
      fixed: 'left',
      headerAlign: 'center',
      sortBy: 'projectName',
      slots: {
        default: ({row}) => {
          const content = row.highlight?.projectName ? row.highlight?.projectName : row.projectName;
          if (row.id) {
            return <a title={row.projectName} class="companyName"
                      onClick={() => toProjectDetail(row.id)}
                      v-html={content}></a>;
          } else {
            return <span title={row.projectName || ''} v-html={content || '-'}></span>;
          }
        }
      }

    },
    {
      field: 'totalInvestmentDisplay',
      title: '项目总投资额',
      align: 'center',
      sortable: true,
      width: 200,
      sortBy: 'totalInvestmentDisplay',
      formatter: ({row}) => {
        return row.totalInvestmentDisplay ? row.totalInvestmentDisplay + '亿' : '-';
      }
    },
    {
      field: 'projectCapitalDisplay',
      title: '项目资本金',
      align: 'center',
      sortable: true,
      width: 200,
      sortBy: 'projectCapitalDisplay',
      formatter: ({row}) => {
        return row.projectCapitalDisplay ? row.projectCapitalDisplay + '亿' : '-';
      }
    },
    {
      field: 'startingYear',
      title: '建设起始年',
      align: 'center',
      sortable: true,
      width: 150,
      sortBy: 'startingYear',
      formatter: ({row}) => {
        return row.startingYear ? row.startingYear + '年' : '-';
      }
    },
    {
      field: 'areaName',
      title: '项目所属地区',
      align: 'center',
      sortable: true,
      width: 150,
      sortBy: 'areaName'
    },
    {
      field: 'greenProjectCompanyInfos',
      title: '项目主体',
      headerAlign: 'center',
      sortBy: 'greenProjectCompanyInfos',
      slots: {
        default: ({row}) => {
          if (row.greenProjectCompanyInfos?.length === 0) {
            return '-';
          }
          return row?.greenProjectCompanyInfos?.map((item) => {
            if (item.companyId) {
              return <a title={item.companyName} class="companyName"
                        onClick={() => toF9(item.companyId)}
                        v-html={item.companyName || '-'}></a>;
            } else {
              return <span title={item.companyName || ''} v-html={item.companyName || '-'}></span>;
            }
          }) || '-';
        }
      }
    },
  ]);

  return {
    columns
  };
}
